<template lang="">
  <div>
    <!-- <div style="margin-bottom:20px">
      <span style="color: #CD0312">竞价大厅</span>
      <span style="margin:10px">>></span>
      <span>竞价列表</span>
    </div> -->
    <el-row style="height:40px;line-height:40px">
      <el-col :span="1"><div class="grid-content tag">地区</div></el-col>
      <el-col :span="23"><div class="grid-content">
          <el-tabs v-model="activeName1" @tab-click="addressClick" style="margin-left: 40px;">
            <el-tab-pane v-for="(_key,index) in addressList" :key="_key" :label="addressList[index]" :name ="index=== 0?'first':''"></el-tab-pane>
          </el-tabs>
      </div></el-col>
    </el-row>
    <el-row style="height:40px;line-height:40px">
      <el-col :span="1"><div class="grid-content tag">状态</div></el-col>
      <el-col :span="23"><div class="grid-content">
          <el-tabs v-model="activeName2" @tab-click="statusClick" style="margin-left: 40px;">
            <el-tab-pane label="不限" name ="first" ></el-tab-pane>
            <el-tab-pane label="未开始"></el-tab-pane>
            <el-tab-pane label="进行中"></el-tab-pane>
            <el-tab-pane label="已结束"></el-tab-pane>
          </el-tabs>
      </div></el-col>
    </el-row>
    <div class="hot_material_transaction">
      <div class="div1" v-for="(goods,index) in listData" :key="index">
          <div style="width:290px;height:200px;text-align: center;overflow:hidden;">
            <el-image :src="'http://101.43.223.224:8765/image/getImageById?id='+goods.imgId.split(',')[0]" @click="toNoBiddingDetailsPage(goods.id)"></el-image>
          </div>
          <div class="goods-name-box">
            <div style="height: 40px;width:238px;float:left;margin-left:10px;font-size: 16px;" @click="toNoBiddingDetailsPage(goods.id)">{{goods.goodsName}}</div>
            <img style="width: 40px;height:40px;float: right;" src="../assets/dongtai.gif">
          </div>
          <div style="width: 100%;margin-left: 24px;height: 53px;margin-top: -30px;">
            <span style="position: relative;top: -34px;left:-10px;" v-if="goods.transactionStatus === 1"><i class="el-icon-timer"></i>
              <CountDown1
                v-on:start_callback="countDownS_cb(1)"
                v-on:end_callback="countDownE_cb(1)"
                :currentTime="timeFn(goods.startTime)"
                :startTime="timeFn(goods.endTime)"
                :endTime="timeFn(goods.startTime)"
                :dayTxt="'天'"
                :hourTxt="'小时'"
                :minutesTxt="'分钟'"
                :secondsTxt="'秒'" style="display: inline-block;">
              </CountDown1>
              <span style="color:green;margin-left:28px">&nbsp;后开始</span>
            </span>
            <span style="position: relative;top: -34px;left:-10px;" v-if="goods.transactionStatus === 2"><i class="el-icon-timer"></i>
              <CountDown1
                v-on:start_callback="countDownS_cb(1)"
                v-on:end_callback="countDownE_cb(1)"
                :currentTime="timeFn(goods.startTime)"
                :startTime="timeFn(goods.endTime)"
                :endTime="timeFn(goods.startTime)"
                :dayTxt="'天'"
                :hourTxt="'小时'"
                :minutesTxt="'分钟'"
                :secondsTxt="'秒'" style="display: inline-block;">
              </CountDown1>
              <span style="color:#D7000F;margin-left:28px">&nbsp;后结束</span>
            </span>
            <span style="top: -18px;left:-10px;position: relative;" v-show="goods.transactionStatus === 3"><i class="el-icon-timer"></i>{{goods.endTime}}</span>
          </div>
          <div style="margin-left: 18px;color:grey;margin-top: -10px;">
            <sapn style="font-size: 14px;">起拍价:</sapn>
            <span style="font-size: 18px;color:#D7000F;">￥</span>
            <span style="color: #D7000F;font-size: 30px;font-weight:bold;">{{goods.startPrice}}</span>
            <div class="dian">{{goods.contactName}}</div>
            <el-button class="guanzu">
              <i class="el-icon-star-on" style="font-size:22px ;"></i><span style="position:relative;top:-2px;right:2px">关注</span>
            </el-button>
            <div style="float: right;margin-right:18px;font-size: 14px;margin-top: 4px;">竞买 1000+</div>
          </div>
        <span class="begin_in_a_minute" v-show="goods.transactionStatus === 2" style="background-color: #BA0000;">竞拍中</span>
        <span class="begin_in_a_minute" v-show="goods.transactionStatus === 3" style="background-color: grey;">已结束</span>
        <span class="begin_in_a_minute" v-show="goods.transactionStatus === 1" style="background-color: green;">未开始</span>
      </div>
       <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[12, 18, 24, 30]"
        :page-size="12"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" style="margin:10px auto;float:left;width:100%;text-align: center;">
      </el-pagination>
    </div>
    <el-row>
      <el-col :span="8"><div>
          <div style="width: 40%;height: 200px;margin-left: 10%;float: left;">
            <img style="float: left;margin-top: 37px;" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u561.svg">
            <div style="float: left;margin-left: 10px;font-size: 18px;margin-top: 50px;">微信服务号</div>
            <span style="float: left;margin-left: 10px;margin-top:30px;font-size: 14px;">一手消息随时掌握</span>
          </div>
        </div></el-col>
      <el-col :span="8"><div>
        <div style="width: 40%;height: 200px;float: left;margin-left: 10%;">
          <img style="float: left;margin-top: 37px;" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u564.svg">
          <div style="float: left;margin-left: 10px;font-size: 18px;margin-top: 50px;">微信小程序</div>
          <span style="margin-left: -87px;margin-top: 100px;float: left;font-size: 14px;">随时随地交易</span>
        </div>
      </div></el-col>
      <el-col :span="8"><div>
        <p style="margin-top: 47px;">
          <span style="margin-right: 50px;font-size: 14px;">沪ICP备XXXXXXXX号</span>
          <span style="margin-right: 50px;font-size: 14px;">增值电信业务经营许可证沪B</span>
          <span style="font-size: 14px;">全国免费服务热线：400-886-0000</span>
        </p>
        <p style="margin-top: 30px;">
          <span style="margin-right: 50px;font-size: 14px;">沪ICP备XXXXXXXX号</span>
          <span style="font-size: 14px;">增值电信业务经营许可证沪B</span>
        </p>
      </div></el-col>
    </el-row>
  </div>
</template>
<script>
import CountDown1 from 'vue2-countdown'
export default {
  components: {
    CountDown1
  },
  data () {
    return {
      token: window.sessionStorage.getItem('token'), // 取token
      currentPage4: 1, // 分页显示第几页
      pageRequest: { // 分页请求参数
        pageSize: 12, // 每页条数
        pageNum: 1 // 每页数量
      },
      total: 0, // 分页总条数
      listData: [], // 竞品信息列表
      activeName1: 'first', // 标签框框
      activeName2: 'first', // 标签框框
      activeName3: 'first', // 标签框框
      addressList: ['不限', '河南', '北京', '广东', '上海', '陕西', '山东', '湖南', '四川', '浙江', '辽宁', '河北', '福建', '江苏', '湖北'], // 地区列表
      industryList: ['不限', '二手设备', '再生资源', '废旧资源', '危废', '旧货'], // 行业框框
      address: '', // 交易地址（筛选条件）
      status: 0, // 交易状态
      goodsName: '' // 商品名称（筛选条件）
    }
  },
  async mounted () {
    this.getGoodsList()
    this.getLoginUser()
  },
  methods: {
    async getLoginUser () {
      this.$axios.post('/clientuser/getLoginUser', this.token).then(res => {
        if (res.data.flag) {
          this.loginUser = res.data.obj
          console.log(this.loginUser)
        } else {
          this.myMessage('当前用户暂未参与交易', 'error')
        }
      })
      console.log('已获取登录用户信息')
    },
    // 查询全部竞品信息
    async getGoodsList () {
      this.$axios.get('/client/auction/getGoodsList',
        {
          params: {
            goodsName: this.goodsName,
            address: this.address,
            status: this.status,
            pageSize: this.pageRequest.pageSize,
            pageNum: this.pageRequest.pageNum
          }
        }).then(res => {
        if (res.data.flag) {
          this.listData = res.data.obj.list
          this.total = res.data.obj.total
          console.log(this.listData)
        } else {
          this.myMessage('竞品列表信息显示失败', 'error')
        }
      })
    },
    addressClick (val) {
      if (val._data.index !== '0') {
        this.address = val.$options.propsData.label
      } else {
        this.address = ''
      }
      console.log(this.address)
      this.getGoodsList()
    },
    statusClick (val) {
      this.status = val._data.index
      console.log(val._data.index)
      this.getGoodsList()
    },
    handleSizeChange (val) { // 改变每页条数
      this.pageRequest.pageSize = val
      this.getGoodsList()
    },
    handleCurrentChange (val) { // 改变当前页
      this.pageRequest.pageNum = val
      this.getGoodsList()
    },
    // 跳转至竞买
    toNoBiddingDetailsPage (goodsId) {
      this.$router.push({
        path: '/noBiddingDetails',
        query: { goodsId: goodsId }
      })
    },
    // 时间格式
    timeFn (date) {
      const dateBegin = new Date(date.replace(/-/g, '/'))// 将-转化为/，使用new Date
      const time = parseInt(dateBegin.getTime() / 1000)
      return time
    },
    // 当前时间格式
    timeFnNew () {
      const time = parseInt((new Date()).getTime() / 1000)
      return time
    },
    // 时间格式化
    filters: {
      timefilter: function (value, args) {
        const dt = new Date(value)
        const y = dt.getFullYear()
        // 这里month得加1
        const m = dt.getMonth() + 1
        const d = dt.getDate()
        // 如果要求的时间格式只有年月日
        if (args === 'yyyy-MM-dd') {
          return `${y}-${m}-${d}`
          // 如果时间要求精确到时分秒
        } else {
          const hh = dt.getHours()
          const mm = dt.getMinutes()
          const ss = dt.getSeconds()
          return `${y}-${m}-${d}:${hh}:${mm}:${ss}`
        }
      }
    },
    countDownS_cb: function (x) { // 开始倒计时进行的回调
      // console.log(x, '开始')
    },
    countDownE_cb: function (x) { // 倒计时结束进行的回调
      // this.$message.error("考试时间到，试卷自动提交");
      // console.log(x, '结束')
      this.selectGoodsList()
    },
    // 我的信息
    myMessage (message, type) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/.el-tabs__active-bar{
    background-color: #D7000F;
  }
  /deep/.el-tabs__item.is-active{
    color:#D7000F;

  }
  /deep/.el-tabs__nav-scroll {
    background-color: none;
  }
  /deep/.el-tabs__nav-wrap::after {
    background: none;
  }
  /deep/.el-tabs__item:hover{
    color:#D7000F;
  }
  .tag{
    border-radius: 10px;
    background-color: #D7000F;
    color: #F1F2E5;
    /* border: 2px solid #D7000F; */
  }
  .grid-content{
    text-align: center;
  }
  .input{
    width: 184px;
    position: relative;
    top: -1px;
  }
  .begin_in_a_minute{
    width:60px;
    height: 28px;
    position: absolute;
    font-size: 10px;
    top: 10px;
    right: 10px;
    float: right;
    text-align: center;
    color: #fff;
    line-height: 28px;
  }
  .div1{
    position: relative;
    margin-left: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    width: 288px;
    height: 380px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
  }
  .div1:hover{
    transform: scale(1.1);
    transition: 0.5s;
    border: 3px solid #BA0000;
  }
  .div1:hover .goods-name-box{
    position: relative; top: -40px; color: white;opacity: 0.8;height: 40px;line-height: 40px;background-color: #BA0000;
  }
  .goods-name-box{
    position: relative; top: -40px; color: white; opacity: 0.8;height: 40px;line-height: 40px;
    background-color: gray;
  }
  .hot_material_transaction{
    margin-top: 10px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
  }
  .dian:hover{
    color: #7DB8EB;
  }
  .dian{
    font-size: 14px;
    color:grey;
    margin-bottom: 15px;
    margin-top: 10px;
  }
  .guanzu:hover{
    border: 1px solid #BA0000;
    color:#BA0000
  }
  .guanzu{
    border:1px solid grey;
    font-size:12px;
    float: left;
    padding: 4px;
  }
</style>
